<template>
  <el-dialog :title="`选择骑手`" :append-to-body="true" @close="closeDio" :visible.sync="dialogTableVisible" width="1200px" style="padding: 20px">
    <el-row class="seaheaad">
      <el-col :span="24">
        <xzUserSearch @sendSearch="getSearch"></xzUserSearch>
      </el-col>
    </el-row>

    <el-table ref="multipleTable" :data="list.data" stripe header-row-class-name="head_color" tooltip-effect="dark" style="width: 99.9%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" class="tc" width="35"></el-table-column>

      <el-table-column label="骑手" min-width="80" align="center">
        <template slot-scope="scope">
          <div class="tc">
            <img style="width: 50px; height: 50px" :src="imgError(scope.row.avatar)" class="user_img" />
            <!-- <span>{{ scope.row.rating_cn }}</span> -->
          </div>
        </template>
      </el-table-column>

      <el-table-column label="用户信息" min-width="140">
        <template slot-scope="scope">
          <div class="user_table">
            <span>用户名：</span>
            <small>{{ scope.row.username }}</small>
            <br />
            <span>昵称：</span>
            <small>{{ scope.row.nickname }}</small>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="骑手信息" min-width="120">
        <template slot-scope="scope">
          <div class="tab_div">
            <div>
              <span>工资：</span>
              <span>{{ Number(scope.row.wages || 0) }}</span>
            </div>
            <div>
              <span>保证金：</span>
              <span>{{ Number(scope.row.margin || 0) }}</span>
            </div>
            <div>
              <span>累计接单量：</span>
              <span>{{ Number(scope.row.rider_number || 0) }}</span>
            </div>
            <div>
              <span>本月接单量：</span>
              <span>{{ Number(scope.row.month_number || 0) }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上下班状态" min-width="120">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.is_rider_work == 0" effect="dark">下班</el-tag>
          <el-tag type="success" v-else-if="scope.row.is_rider_work == 1" effect="dark">上班</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <el-row class="myblank">
            <el-button :loading="$store.state.isLoading" size="mini" @click="addShops(scope.row)" type="primary">选择</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="table_bottom">
        <el-col :span="24" class="tr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.all_num"
          >
          </el-pagination>
        </el-col>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import xzUserSearch from "@/components/currency/xzUserSearch.vue";
export default {
  name: "xz_driverwork",
  components: {
    xzUserSearch,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    showType: {
      type: String,
      default: "table",
    },
    isAll: {
      type: Boolean,
      default: false,
    },
    isPart: {
      type: Boolean,
      default: false,
    },
    extract_id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      list: [],
      currentPage1: 1,
      pageSize: 10,
      dialogTableVisible: this.show,
      loading: false,
      searchAll: {},
      multipleSelection: "",
    };
  },
  methods: {
    getSearch(obj) {
      this.loading = true;
      this.searchAll = obj;
      this.getNewsAll(this.searchAll);
    },
    getNewsAll(params) {
      params = params || {};
      this.loading = true;
      params.rider_extract_id = this.rider_extract_id;
      params.is_rider_work = 1;
      this.$api.getRider.getRiderList(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
      this.loading = false;
    },
    imgError(item) {
      if (!item) {
        return require("../../assets/img/default_head.png");
      }
      if (item.indexOf("http") >= 0) {
        return item;
      } else {
        return "/api/" + item;
      }
    },
    addShops(row) {
      var params = this.edit_form;
      this.$confirm("是否确认选择该骑手?", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$emit("sendShop", row);
          this.dialogTableVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    closeDio() {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    },
    handleSelectionChange(val) {
      //多选框赋值
      this.multipleSelection = val;
    },
    addParts() {
      this.$emit("sendShop", this.multipleSelection, "obj");
      this.dialogTableVisible = false;
    },
  },
  watch: {
    show(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.dialogTableVisible = val1;
      this.currentPage1 = 1;
      this.getNewsAll();
    },
    dialogTableVisible(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.$emit("isshow", val1);
    },
  },

  created() {
    this.getNewsAll();
  },
};
</script>
<style lang="less" scoped>
.list_ul {
  // height: 610px;
  overflow: auto;
}
.list_card {
  padding: 15px;
  cursor: pointer;
}
.card_list {
  line-height: 2;
  padding: 5px 0 0 5px;
}
.price_card {
  color: red;
}
.image {
  height: 200px;
  max-width: none;
  max-height: none;
}
.sead {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.seaheaad {
  padding-bottom: 10px !important;
}
</style>
